<template>
  <div v-loading="mapLoading" element-loading-text="拼命加载中" class="map" :style="{height: mapLoading ? '200px' : '100%'}">
    <div class="priceclass">
      <div class="pricemark" v-for="(item, index) in showinfo.priceRange" :key="index">
        <span class="price">{{item.price}}</span>
        <span class="mark" :style="{backgroundColor: pricemarkcolor(item.class)}"></span>
      </div>
    </div>
    <div class="seatmap" v-show="!mapLoading">
       <div
         v-for="seat in hallInfo.hallSeatMap"
         :key="seat.id"
         :class= "[ seat.isSeat ? 'seat' : 'notseat' ]"
         :style="{width:seatSize,height:seatSize}"
         >
           <div class="icon" :ref="`seat${seat.id}`"></div>
       </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'displayshowseatmap',
  data () {
    return {
      // 对应的颜色数据
      pricecolor: ['#ec6c3a', '#e1c63f', '#54c0f6', '#0d738f', '#0f7018', '#8fc460'],
      // 把传入的价格分割为数组形式
      pricearr: [],
      // 座位图加载
      mapLoading: true,
      // 切换标识符
      editflag: false
    }
  },
  props: {
    // 当前页面状态
    caneditshowinfo: {
      type: Boolean,
      default: false
    },
    // 演出地点级联选择器
    hall: {
      type: Array,
      default () {
        return []
      }
    },
    // 当前剧目信息
    showinfo: {
      type: Object,
      default () {
        return {}
      }
    },
    // 当前剧目的价格数据
    price: {
      type: String,
      default: ''
    },
    // 当前剧座位大小
    seatSize: {
      type: String,
      default: ''
    },
    // 当前剧目座位图
    hallInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    hallInfo () {
      this.$nextTick(() => {
        this.getcolor()
      })
    },
    caneditshowinfo () {
      console.log('当前剧目信息更改了')
      if (this.caneditshowinfo === false) {
        // 清除颜色和重新填充
        this.clearallcolor()
        this.getcolor()
      }
    }
  },
  computed: {
    // 通过价格等级计算需要添加的颜色
    pricemarkcolor (index) {
      return function (index) {
        return this.pricecolor[Math.abs(index - this.pricearr.length + 1)]
      }
    }
  },
  methods: {
    // 通过pricemap来给座位填充颜色
    getcolor () {
      // 处理传入的价格数据，先分割、转数字、翻转
      this.pricearr = this.price.split(',').map(i => { return +i })
      // 通过price对象数组来确定价格数组
      // console.log('get color')
      this.pricearr.sort((a, b) => { return b - a })
      // console.log(this.pricearr)
      // console.log(this.showinfo.pricemap)
      this.showinfo.pricemap.forEach(item => {
        // console.log(item)
        // 先确定好当前价位是价位的哪个等级
        let priceclass = this.pricearr.indexOf(item.price)
        // 确定对应等级的颜色
        // console.log(priceclass)
        let color = this.pricecolor[priceclass]
        // console.log(priceclass, color)
        // 开始循环添加颜色
        item.id.forEach(y => {
          // console.log('循环')
          this.$nextTick(() => {
            this.$refs[`seat${y}`][0].style.backgroundColor = color
          })
        })
      })
      // 循环结束后去除loading遮罩
      this.mapLoading = false
    },
    // 用于清除所有颜色
    clearallcolor () {
      // console.log('clear color')
      this.hallInfo.hallSeatMap.forEach(item => {
        this.$nextTick(() => {
          this.$refs[`seat${item.id}`][0].style.backgroundColor = 'pink'
        })
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
.priceclass
  display flex
  .pricemark
    height 40px
    line-height 40px
    padding-right 30px
    .price
      height 20px
      line-height 20px
      padding 8px 12px
      font-size 12px
    .mark
      display inline-block
      width 20px
      height 20px
.seatmap
  font-size 0
  box-sizing border-box
  .seat
    display inline-block
    padding 2px
    .icon
      width 100%
      height 100%
      background-color pink
  .notseat
    opacity 0.5
    display inline-block
</style>
